<template>
  <div>
    <van-field
      readonly
      :name="name"
      :label="label"
      placeholder="请选择"
      input-align="right"
      class="org-select"
      label-class="pt-8px text-16px"
    >
      <template #input>
        <div class="flex flex-col items-end">
          <div class="flex items-start content-start justify-end w-full flex-wrap">
            <div
              v-for="(item, index) in tags"
              :key="item"
              class="p-[6px_11px_6px_6px] mt-10px mr-15px w-auto flex justify-end bg-#F2F3F5 rounded-2px overflow-visible relative"
            >
              <span
                class="text-#71747A block max-w-50vw text-14px leading-16px font-400"
              >
                {{ item }}
              </span>
              <img
                class="absolute top--6px right--10px w-20px h-20px"
                src="@/assets/img/icon_close.svg"
                alt=""
                @click.stop="removeTag(index)"
              />
            </div>
          </div>
          <div class="flex w-auto items-center justify-end mt-5px" @click="isShow = true">
            <i
              style="font-style: normal"
              class="flex border-#36B374 border-2px border-solid rounded-2px items-center justify-center w-22px h-22px text-20px c-#36B374"
            >
              +
            </i>
            <span class="ml-10px text-16px font-400 leading-22px text-#229F60"
              >添加</span
            >
          </div>
        </div>
      </template>
    </van-field>
    <ConfirmDialog :show.sync="isShow" @confirm="addTag">
      <template #content>
        <div>
          <div class="text-16px leading-18px font-500">{{ props.label }}</div>
          <div class="box-border my-10px bg-#F8F9FB rounded-4px flex items-center h-54px p-10px">
            <input
              class="border-0 w-full h-full bg-transparent box-border flex"
              :placeholder="`请输入${props.label}名称`"
              v-model="inputValue"
              type="text"
            />
          </div>
        </div>
      </template>
    </ConfirmDialog>
  </div>
</template>

<script setup>
import ConfirmDialog from '@/views/workOrder/components/ConfirmDialog.vue'

const props = defineProps({
  label: String,
  name: {
    type: String,
    default: ''
  },
  value: Array
})
const emit = defineEmits(['update:value'])
const inputValue = ref('')
const isShow = ref(false)
const tags = computed({
  get() {
    return props.value
  },
  set(value) {
    emit('update:value', value)
  }
})

const addTag = () => {
  if (inputValue.value.trim()) {
    tags.value.push(inputValue.value.trim())
    inputValue.value = ''
  }
  isShow.value = false
}

const removeTag = (index) => {
  tags.value.splice(index, 1)
}
</script>

<style scoped></style>
